<template>
	<el-table
		:data="productComponentList"
		style="width: 100%; margin: 0 auto"
		@selection-change="handleProductsSelectionChange"
		size="small"
	>
		<el-table-column type="selection"></el-table-column>
		<el-table-column type="expand" label="展开零件信息" width="100">
			<template #default="props">
				<div style="margin-left: 10%">
					<!-- <el-input
						size="small"
						style="width: 200px; margin-right: 10px"
						placeholder="零件筛选"
						:suffix-icon="Search"
					/> -->
					<!-- <el-button type="warning" :icon="Plus" size="small" /> -->
				</div>
				<!-- 零件表 -->
				<componentPartTable
					:data="props.row.parts"
					@editComponentPart="handleComponentPart($event, props.row)"
				/>
			</template>
		</el-table-column>

		<el-table-column
			header-align="center"
			align="center"
			prop="productName"
			label="产品名称"
			width="130"
		/>
		<el-table-column
			header-align="center"
			align="center"
			prop="productID"
			label="产品ID"
			width="130"
		/>
		<el-table-column header-align="center" align="center" prop="name" label="组件名称" />
		<el-table-column header-align="center" align="center" prop="code" label="组件ID" width="100" />
		<el-table-column
			header-align="center"
			align="center"
			prop="prev"
			label="上一级组件"
			width="120"
		/>
		<el-table-column header-align="center" align="center" prop="" label="技术要求" width="80" />
		<el-table-column header-align="center" align="center" prop="" label="技术文件" width="80">
			<template #default="props">
				<el-button size="small" type="warning" link>查看文件</el-button>
			</template>
		</el-table-column>
		<el-table-column header-align="center" align="center" prop="unit" label="单位">
			<template #default="scope">
				<el-tag type="" style="margin: 0 auto">{{ scope.row.unit }}</el-tag>
			</template>
		</el-table-column>
		<el-table-column header-align="center" align="center" prop="version" label="版本" />
		<el-table-column header-align="center" align="center" label="" width="150">
			<template #default="props">
				<el-button
					size="small"
					type="primary"
					:icon="Plus"
					circle
					@click="handleOpenCreateComponentPart(props.row)"
				/>
				<el-button
					size="small"
					type="primary"
					:icon="Edit"
					circle
					@click="handleOpenEditComponent(props.row)"
				/>
				<el-button size="small" type="danger" :icon="Delete" circle />
			</template>
		</el-table-column>
	</el-table>
	<el-pagination
		:current-page="pageData.currentPage"
		:page-size="pageData.pageSize"
		:small="true"
		:disabled="false"
		:background="true"
		layout="total, prev, pager, next"
		:total="productConfigDataList.length"
		@size-change="() => {}"
		@current-change="() => {}"
		style="display: flex; justify-content: flex-end; margin-top: 10px"
	/>
	<componentPartDialog
		:componentDialogPartConfig="componentDialogPartConfig"
		@cancel="cancelComponentPart"
	></componentPartDialog>
</template>
<style lang="scss" scoped>
.pagination-component {
	&::before {
		content: '组件';
		font-size: 12px;
	}
}
</style>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import type { ComponentSize, FormInstance, FormRules } from 'element-plus';
import { ElMessage } from 'element-plus';
import { Check, Delete, Edit, Message, Search, Star, Plus } from '@element-plus/icons-vue';
import componentPartTable from './componentPartTable.vue';
import componentPartDialog from './componentPartDialog.vue';

const props = defineProps({
	productConfigDataList: {
		type: Array,
	},
	productComponentList: {
		type: Array,
	},
});
const emits = defineEmits(['handleProductsSelectionChange', 'editComponent']);

const pageData = reactive({
	currentPage: 1,
	pageSize: 10,
});

const handleProductsSelectionChange = _selections => {
	emits('handleProductsSelectionChange', _selections);
};

const componentDialogPartConfig = reactive({
	visible: false,
	title: '',
});

/**
 * 打开编辑组件弹窗
 */
const handleOpenEditComponent = rowData => {
	emits('editComponent', rowData);
};

const handleOpenCreateComponentPart = rowData => {
	console.log(rowData, 'rowData');
	componentDialogPartConfig.visible = true;
	componentDialogPartConfig.title = `新增【${rowData.name}】的零件`;
};

const cancelComponentPart = () => {
	componentDialogPartConfig.visible = false;
};

const handleComponentPart = (rowData, componentData) => {
	componentDialogPartConfig.visible = true;
	componentDialogPartConfig.title = `编辑【${componentData.name}】的零件-${rowData.name}`;
	// ElMessage({
	// 	message: JSON.stringify(rowData),
	// 	type: 'success',
	// });
};
</script>
